<template>
  <el-drawer
          title="选择餐品"
          :visible.sync="dialogVisible"
          size="30%"
          :wrapperClosable="wrapperClosable"
          :close-on-press-escape="closscape"
          :destroy-on-close="true"
          @close="$emit('update:visible',false)">
    <div class="table-body-list">
      <div class="top-button-bottom">
        <el-button type="primary" @click.native="checkfood(1)" size="small">确定</el-button>
        <el-button @click.native="checkfood(2)" size="small">取消</el-button>
      </div>
      <el-table :data="gridData"
                @selection-change="handleSelectionChange">
        <el-table-column
                type="selection"
                width="55"
        align="center">
        </el-table-column>
        <el-table-column label="餐品展示图" width="150">
          <template slot-scope="scope">
            <div class="checkImgDialog width40"
                 :style="{backgroundImage:'url('+scope.row.pic+')',backgroundSize:'cover',backgroundPosition:'center'}">
              <div class="imgpreviewBody">
                <div class="imgpreview">
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column property="name" label="餐品名称"></el-table-column>
      </el-table>
    </div>
  </el-drawer>
</template>
<script>
  import api from '@/utils/api.js'
  import {pagination} from '@/utils/util.js'

  export default {
    name: 'Dialog',
    props: ['visible', 'SelectionValNew'],
    watch: {
      visible () {
        this.dialogVisible = this.visible
      },
      SelectionValNew () {
        console.log('选择内容：', this.SelectionValNew)
        this.SelectionVal = this.SelectionValNew
      }
    },
    data () {
      return {
        wrapperClosable: false,
        closscape: false,
        dialogVisible: this.visible,
        gridData: [],
        page: {
          pageindex: pagination.pageIndex,
          pagesize: pagination.pageSize,
          total: pagination.total
        },
        SelectionVal: this.SelectionValNew
      }
    },
    created () {
      this.InitFn()
    },
    methods: {
      InitFn () {
        this.$post(api.food_list, {
          p: this.page.pageindex,
          name: '',
          cate_id: ''
        }).then((response) => {
          if (response.code === 0) {
            this.gridData = response.list.data
            this.page.total = response.list.total
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      // 选项
      handleSelectionChange (val) {
        this.SelectionVal = val
      },
      checkfood (option) {
        if (option === 1) {
          if (this.SelectionVal.length === 0) {
            this.$message.error('请选择需要发布的餐品')
          } else {
            this.$emit('chooseFood', this.SelectionVal)
            this.dialogVisible = false
          }
        } else {
          this.dialogVisible = false
          this.SelectionVal = []
        }
      }
    }
  }
</script>
